<xmp type="template" name="form.checkbox">
    <div class="input-control checkbox">
        <label>
            <input type="checkbox" name="{{name}}" />
            <span class="check"></span>
            {{label}}
        </label>
    </div>
</xmp>

<xmp type="template" name="form.checkbox.list">
    <div>
        <div>{{title}}</div>
        <div class="input-control">
            {{#each items}}
            <div class="input-control checkbox">
                <label>
                    <input type="checkbox" name="{{$Caller.name}}" />
                    <span class="check"></span>
                    {{label}}
                </label>
            </div>
            {{/each}}
        </div>
    </div>
</xmp>

<xmp type="template" name="form.radio">
    <div class="input-control radio default-style">
        <label>
            <input type="radio" name="{{name}}" />
            <span class="check"></span>
            {{label}}
        </label>
    </div>
</xmp>

<xmp type="template" name="form.radio.list">
    <div class="input-control">
        <label>{{label}}</label>
        {{#each items}}
        <div class="input-control radio default-style">
            <label>
                <!-- 当前数据:$Parent => 数组数据:$Parent => 所要数据 -->
                <input type="radio" name="{{$Parent.$Parent.name}}" />
                <span class="check"></span>
                {{label}}
            </label>
        </div>
        {{/each}}
    </div>
</xmp>

<xmp type="template" name="form.switch">
    <div>
        <div>{{title}}</div>
        <div class="input-control switch">
            <label>
                <input type="checkbox" checked="{{value}}" bind-input="{{'value'}}" />
                <span class="check"></span>
                {{switchs&&switchs[value||false]}}
            </label>
        </div>
    </div>
</xmp>

<xmp type="template" name="form.textarea">
    <txtarea>
        <txttitle>{{title}}<icon class="{{icon-class}}"></icon></txttitle>
        <div class="input-control textarea">
            <textarea value="{{value}}" bind-input="{{'value'}}"></textarea>
        </div>
    </txtarea>
</xmp>



<xmp type="template" name="form.datepicker">
    <div>
        <div>{{title}}</div>
        <datepickerWrap>
            <datepicker>
                <input class="inner-input" type="text" value="{{$Private.data.value}}" />
            </datepicker>
            <icon style="line-height: 22px;" class="icon-calendar" event-click="{{'$Private.event.showCalendar'}}">
        </datepickerWrap>
        <!-- <div class="input-control text" data-role="datepicker" data-locale="zhCN">
            <input data-id="apply_time" value="{{apply_time}}" bind-input="{{'apply_time'}}" type="text">
            <button class="btn-date"></button>
        </div> -->
    </div>
</xmp>
<script type="text/vm" name="form.datepicker">
function(vm) {
    var datepickerNode = vm.queryElement({
        tagName: "DATEPICKER"
    })[0];
    var inputNode = vm.queryElement({
        tagName: "INPUT"
    })[0];
    vm.set("$Private.event.showCalendar", function(e) {
        jSouper.dispatchEvent(inputNode, "click");
    });
    require(["jQuery", "metro-datepicker"], function($) {
        //复合日期字符串
        dataValue = $.trim(inputNode.value) || 0;
        if (dataValue == parseInt(dataValue)) { //毫秒数
            dataValue = parseInt(dataValue);
        }
        var date = new Date(dataValue);
        var today = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
        $(datepickerNode).datepicker({
            date: today, // set init date
            format: "yyyy/mm/dd", // set output format
            effect: "none", // none, slide, fade
            position: "bottom", // top or bottom,
            locale: vm.get("locale") || 'zhCN',
            selected: function(dataStr, dataObj) {
                vm.set("value", +dataObj);
            }
        });
    });
    vm.set("$Private.data.value", Model.Observer(function() {
        var dataValue = vm.get("value");
        //复合日期字符串
        dataValue = $.trim(dataValue) || 0;
        if (dataValue == parseInt(dataValue)) { //毫秒数
            dataValue = parseInt(dataValue);
        }
        var date = new Date(dataValue);
        var result = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
        return result;
    }));

    vm.model.onfollow = function() {
        vm.get("$Private.data.value");
    }
}
</script>
